<template>
  <BackgroundBar
    :immersive="false"
    back
    title="基本信息"
    @onBack="handlerBack"
    @onHome="handlerBack"
  />

  <view class="user_avatar pt40 pb40">
    <uv-avatar
      :src="`${env.ossBucket}${userInfo.profileImageUrl}`"
      size="150rpx"
      alt="头像加载失败"
      @click="handlerChooseBgImg"
    ></uv-avatar>
  </view>

  <view v-if="userInfo.userId" class="pl46 pr46">
    <uv-form
      ref="formRef"
      labelPosition="left"
      :model="userInfo"
      :rules="rules"
      :labelWidth="60"
    >
      <uv-form-item label="昵称" prop="userName">
        <uv-input
          v-model="userInfo.userName"
          type="userName"
          placeholder="请输入昵称"
          border="bottom"
        ></uv-input>
      </uv-form-item>
      <uv-form-item label="性别" prop="gender">
        <uv-radio-group v-model="userInfo.gender">
          <uv-radio
            v-for="(item, index) in genderList"
            :key="index"
            :label="item.name"
            :name="item.type"
            activeColor="rgba(54, 161, 238, 1)"
            :customStyle="customStyleItem"
            size="24rpx"
            labelSize="24rpx"
          >
          </uv-radio>
        </uv-radio-group>
      </uv-form-item>
      <uv-form-item label="微信号" prop="wechatId">
        <uv-input
          v-model="userInfo.wechatId"
          placeholder="请输入微信号"
          border="bottom"
        ></uv-input>
      </uv-form-item>
    </uv-form>

    <view class="submitButton mt78">
      <uv-button
        type="primary"
        text="保存"
        shape="circle"
        v-bind="buttonPrimary"
        @click="handlerConfirm"
      ></uv-button>
    </view>
  </view>

  <!-- 裁剪工具 -->
  <FullScreen
    ref="fullScreenRef"
    fullType="avatar"
    @confirm="handlerConfirmFull"
  />
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import BackgroundBar from "/components/NavigationBar/background.vue";

import FullScreen from "/components/FullScreen/index.vue";
import useRouter from "/utils/hooks/useRouter.js";

// 获取用户api
import useUserInfo from "/utils/useUserInfo.js";

const { navigateBack } = useRouter();
const { userInfo, reloadUserInfo, uplodaUserInfo } = useUserInfo();

const formRef = ref(null);
const rules = ref({
  userName: {
    type: "string",
    required: true,
    message: "请填写姓名",
    trigger: ["blur", "change"],
  },
  gender: {
    type: "number",
    required: true,
    message: "请选择性别",
    trigger: ["blur", "change"],
  },
  wechatId: {
    type: "string",
    required: true,
    message: "请填写微信号",
    trigger: ["blur", "change"],
  },
});
const buttonPrimary = {
  color: "#00A0E9",
  customStyle: {
    color: "#fff",
    "font-size": "28rpx",
    "font-weight": 500,
    height: "68rpx",
  },
};

const customStyleItem = {
  color: "#333333",
  "margin-right": "20rpx",
};
const genderList = [
  { name: "男", type: 1 },
  { name: "女", type: 2 },
];

const fullScreenRef = ref(null);
const handlerChooseBgImg = () => {
  fullScreenRef.value.chooseImg();
};

const handlerConfirmFull = (path) => {
  userInfo.value.profileImageUrl = path;
};

const handlerConfirm = () => {
  formRef.value
    .validate()
    .then(async (res) => {
      await uplodaUserInfo(userInfo.value);
      navigateBack({
        delta: 1,
      });
    })
    .catch(console.error);
};

const handlerBack = () => {
  reloadUserInfo();
};
</script>

<style lang="scss">
.user_avatar {
  display: flex;
  justify-content: center;
}
.submitButton {
  width: 100%;
  height: 68rpx;
}
</style>
